<template>
	<view class="hot-goods">
		<slot name="top"></slot>
		<view class="goods-list">
			<block v-for="item in hotGoods" :key="item.id">
				<view class="goods-item" :title="item.title" @click="goodsClick(item.id)">
					<image :src="item.img_url" mode="widthFix" lazy-load></image>
					<view class="price">
						<text>{{'¥' + item.sell_price}}</text>
						<text>{{'¥' + item.market_price}}</text>
					</view>
					<view class="name">
						{{item.title}}
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			hotGoods: {
				type: Array,
				default() {
					return []
				}
			}
		},
		methods: {
			goodsClick(id) {
				this.$emit('goodHandle', id)
			}
		}
	}
</script>

<style lang="scss">
	.goods-list{
		display: flex;
		flex-wrap: wrap;
		.goods-item {
			width: 47%;
			background-color: white;
			margin: 10rpx 0 10rpx 16rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			image {
				width: 100%;
				height: 375rpx;
			}
			.price {
				font-size: 36rpx;
				padding-left: 15rpx;
				color: $shop-color;
				text:nth-child(2) {
					padding-left: 30rpx;
					font-size: 26rpx;
					color: #ccc;
					text-decoration: line-through;
				}
			}
			.name {
				padding-left: 15rpx;
				font-size: 30rpx;
				line-height: 50rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-line-clamp: 2; 
				-webkit-box-orient: vertical;
				display: -webkit-box;
			}
		}
	}
</style>
